import { Component, Prop, Vue } from 'vue-property-decorator'
import styles from './OptionLine.less'

@Component({})
export default class OptionLine extends Vue {
  @Prop({}) private sealOption!: any[]
  @Prop({ default: '印章申请信息' }) private panelTitle!: string
  @Prop({ default: 1 }) private theme!: number

  protected render(h: any) {
    return (
      <div class={{ [styles.timeline]: true, 'time-line': true }}>
        <p class={{ [styles.panel]: true, 'time-line-panel': true }}>
          {this.panelTitle}
        </p>
        <el-timeline reverse={false}>
          {this.sealOption &&
            this.sealOption.map(
              (option: any, index: number) =>
                option && (
                  <el-timeline-item
                    key={index}
                    timestamp={option.time}
                    color="#ffffff"
                  >
                    <span
                      style={{
                        color: option.red ? 'red' : '',
                        marginRight: '10px',
                      }}
                    >
                      {option.value}
                    </span>
                    {this.theme === 2 ? <br /> : ''}
                    {option.reason && option.title && option.title}
                    {option.title && option.reason}
                    <div slot="dot" class={styles.circle} />
                  </el-timeline-item>
                )
            )}
        </el-timeline>
      </div>
    )
  }
}
